基于vue3和elementPlus的el

2024-07-16 17:50| 来源: 网络整理| 查看: 265

前言

经常会遇到树状结构的页面，刚开始不是一股脑把树状数据全加载出来了，而是基于懒加载点击节点后调取接口再展开。基于vue3和elementPlus的el-tree组件做个记录~

基本思路

浏览el-tree组件，可以发现有对应的说明和API

在这里插入图片描述

下面是实现的完整demo：

import { ref } from 'vue' import { ElTree } from 'element-plus' // 初始化树数据 const treeData = ref([]) // 模拟异步加载节点数据 async function loadNode(node, resolve) { console.log({ node }) if (node.level === 0) { // 顶层节点，直接加载 const data = await fetchRootData() resolve(data) } else { // 子节点，延迟加载 setTimeout(async () => { const data = await fetchChildData(node.key) resolve(data) }, 1000) } } // 获取顶层节点数据 async function fetchRootData() { // 在这里编写获取顶层节点数据的逻辑，可以调用后端接口等方式获取数据 // 返回一个符合Element Plus el-tree要求的数组格式，例如： return [ { id: 1, label: '节点1', children: [], isLeaf: false }, { id: 2, label: '节点2', children: [], isLeaf: false }, { id: 3, label: '节点3', children: [], isLeaf: false }, ] } // 获取子节点数据 async function fetchChildData(parentKey) { // 在这里编写获取子节点数据的逻辑，可以调用后端接口等方式获取数据 // 返回一个符合Element Plus el-tree要求的数组格式，例如： return [ { id: parentKey + '-1', label: '子节点1', children: [], isLeaf: true }, { id: parentKey + '-2', label: '子节点2', children: [], isLeaf: true }, { id: parentKey + '-3', label: '子节点3', children: [], isLeaf: true }, ] }

说明：在上述代码中，使用vue3的script setup 语法来编写组件的逻辑部分。通过ref创建了一个响应式变量treeData来存储树的数据。使用Element Plus提供的ElTree组件，并传入相应的属性。关于懒加载的实现，通过load属性指定了一个回调函数loadNode。在这个函数中，判断当前节点的层级level，如果为顶层节点（level === 0），则直接加载顶层节点数据；如果为子节点，则采用延迟加载的方式，在setTimeout中模拟异步获取子节点数据。

注意，延迟加载的时间可以根据实际情况进行调整。在fetchRootData和fetchChildData函数中，也可以根据实际需求编写相应的逻辑，例如调用后端接口来获取节点数据，并返回符合el-tree要求的数组格式。

【本文地址】

公司简介

联系我们